<script setup lang='ts'>
import { getBlogList, getComment, getComments, getCommentsLike, getDelComment } from '@/api/blog';
import { CommentType } from '@/models/comment';
import { userStatesStore } from '@/states/userSates';
import { useRouter } from 'vue-router';


interface BlogCommentsType {
  commentsList: CommentType[]
}
const props = withDefaults(defineProps<BlogCommentsType>(),{
  commentsList: []
})
const userStore = userStatesStore()
const router = useRouter()
const toAuthor = (id:number) => {
  router.push({
    path: '/user/detail',
    query: {
      id
    }
  })

}

// 点赞评论
const commentLike = async (comment:any) => {
  const res = await getCommentsLike(comment.id)
  if(res.data.code === 0){
    const res_ = await getComment(comment.id)
    comment.isLiked = res_.data.data.isLiked
    comment.likedNum = res_.data.data.likedNum
  }
}

// 删除评论
const emit = defineEmits(['delCommment'])
const delComment = async (comment:any) => {
  const res = await getDelComment(comment.id)
  if(res.data.code === 0){
    emit('delCommment',comment.id)
  }
}
</script>
<template>
  <div class="content">
    <div class="item" v-for="comment in props.commentsList" :key="comment.id">
      <img
        class="avatar"
        :src="comment.commentUser.avatarUrl"
        @click="toAuthor(comment.commentUser.id)"
      />
      <div class="comment-body">
        <span class="username"  @click="toAuthor(comment.commentUser.id)">{{ comment.commentUser.username }}</span>
        <div class="comment-content">{{ comment.content}}</div>
        <div class="comment-time">{{ comment.updateTime }}</div>
      </div>
      <div class="comment-actions">
        <div @click="commentLike(comment)" class="like-button">
          <van-icon v-if="!comment.isLiked" name="like-o"/>
          <van-icon v-else name="like" color="red"/>
          <div class="count">{{ comment.likedNum}}</div>
        </div>
        <van-icon v-if="comment.commentUser.id == userStore.userInfo?.id" @click="delComment(comment)"  name="delete-o" style="margin-left: 10px;"/>
      </div> 
      <van-divider class="divider"/>
    </div>
  </div>
</template>
<style scoped >
.content{
  display: flex;
  flex-direction: column; 
  align-items: center;    
  justify-content: center;
  margin: 10px 10px 0px;
}
.item{
  width: 100%;
  /* height: 100px; */
  display: flex;
  margin-top: 5px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
}
.comment-body {
  flex: 1;
}
.username {
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.comment-content {
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 14px;
  color: #333;
  margin: 5px;
}
.comment-time {
  font-family: 'PingFang SC', 'Source Han Sans', 'Noto Sans CJK', sans-serif;
  font-size: 12px;
  color: #999;
}
.comment-actions{
  display: flex;
  align-items: center;
}
.like-button {
  cursor: pointer;
  color: #999;
  margin-left: auto;
}

.count{
  font-size: 12px;
  text-align: center;
}
.divider{
  flex-basis: 100%;
  border-color: #bab9b9;
  padding-left: 50px;
}
</style>
